<template>
  <view class="navigation">
    <view class="left">
      <view class="item">
        <u-icon
          name="server-fill"
          :size="40"
          :color="$u.color['contentColor']"
        ></u-icon>
        <view class="text u-line-1">客服</view>
      </view>
      <view class="item">
        <u-icon
          name="home"
          :size="40"
          :color="$u.color['contentColor']"
        ></u-icon>
        <view class="text u-line-1">店铺</view>
      </view>
      <navigator open-type="switchTab" class="item car" url="/pages/cart/cart">
        <u-badge
          class="car-num"
          :count="totalNums"
          type="error"
          :offset="[-3, -6]"
        ></u-badge>
        <u-icon
          name="shopping-cart"
          :size="40"
          :color="$u.color['contentColor']"
        ></u-icon>
        <view class="text u-line-1">购物车</view>
      </navigator>
    </view>
    <view class="right">
      <view @click="handleCartAdd" class="cart btn u-line-1">加入购物车</view>
      <view class="buy btn u-line-1">立即购买</view>
    </view>
  </view>
</template>

<script>
// 1 引入 vuex 辅助函数
import { mapMutations, mapGetters } from "vuex";
export default {
  props: ["goodsDetail"],
  methods: {
    // 2 快速将   cart 中 mutation 方法  转换成  组件内部 普通的函数
    // ...mapMutations("模块的名称",["使用mutation中方法"]),
    ...mapMutations("cart", ["cartAdd"]),
    // 点击加入购物车
    handleCartAdd() {
      // console.log("准备开始购买啦");
      // 准备数据 -  要购买的商品
      // console.log(this.goodsDetail);
      // 提交mutation
      // this.$store.commit("模块名称/方法名称");

      // this.$store.commit("cart/cartAdd", this.goodsDetail);
      // 3 直接使用
      this.cartAdd(this.goodsDetail);

      // 辅助函数   mapMutations     mapState mapGetters mapAction
    },
  },
  computed: {
    // totalNums() {
    //   return this.$store.getters["cart/totalNums"];
    //   // return this.$store.getters.cart/totalNums;
    // },
    // ...mapGetters("模块的名称",["你要使用的getter名称"])
    ...mapGetters("cart", ["totalNums"]),
  },
};
</script>

<style lang="scss" scoped>
.navigation {
  display: flex;
  margin-top: 100rpx;
  border: solid 2rpx #f2f2f2;
  background-color: #ffffff;
  padding: 16rpx 0;
  .left {
    display: flex;
    font-size: 20rpx;
    .item {
      margin: 0 30rpx;
      &.car {
        text-align: center;
        position: relative;
        .car-num {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
        }
      }
    }
  }
  .right {
    display: flex;
    font-size: 28rpx;
    align-items: center;
    .btn {
      line-height: 66rpx;
      padding: 0 30rpx;
      border-radius: 36rpx;
      color: #ffffff;
    }
    .cart {
      background-color: #ed3f14;
      margin-right: 30rpx;
    }
    .buy {
      background-color: #ff7900;
    }
  }
}
</style>
